import {onMounted, nextTick} from 'vue';

export const useKeyboardEvent = (Variable) => {
    const {menuContent,refPlan,showDialog,showShareDetil,showShare,showRenameDialog,openSubWarning} = Variable
    const closeOperatePlan = selected => {
        if (document.querySelector('.plan_popover_operate')) {
          selected.querySelector('.plan_list_more_operate').click();
        }
      };
    let arrowLeftDelay:any = null;
    
    const arrowLeft = e => {
      if (arrowLeftDelay) return;
      arrowLeftDelay = window.setTimeout(() => {
        arrowLeftDelay = null;
        window.clearTimeout(arrowLeftDelay);
      }, 500);
      if (
        showDialog.value ||
        showShareDetil.value ||
        showShare.value ||
        showRenameDialog.value ||
        showShare.value ||
        openSubWarning.value
      ) {
        return;
      }
      const {selected } = getSelectDom();

      if (selected) {
        closeOperatePlan(selected);
        setTimeout(() => {
          refPlan.value.focus();
        }, 500);
        return;
      } else {
        return;
      }
    };
    const arrowRight = e => {
      if (
        showDialog.value ||
        showShareDetil.value ||
        showShare.value ||
        showRenameDialog.value ||
        showShare.value ||
        openSubWarning.value
      ) {
        return;
      }
      const { selected } = getSelectDom();
      if (selected) {
        if (!document.querySelector('.plan_popover_operate')) {
          (selected.querySelector('.plan_list_more_operate') as HTMLElement)?.click();
        }

        setTimeout(() => {
          refPlan.value.focus();
        }, 500);
        return;
      } else {
        return;
      }
    };
    const arrowDown = e => {
      // eslint-disable-next-line prefer-const
      let { selected, itemList } = getSelectDom(true);
      if (!selected&&itemList) {
        itemList[0].classList.add('selected');
        selected = itemList[0];
        return;
      } else if(selected) {
        selected.nextElementSibling && selected.classList.remove('selected');
        selected.nextElementSibling &&
          selected.nextElementSibling.classList.add('selected');
      }
    };
    const arrowUp = e => {
      const {selected } = getSelectDom(true);
      if (!selected) {
        return;
      } else {
        selected.previousElementSibling &&
          selected.classList.remove('selected');
        selected.previousElementSibling &&
          selected.previousElementSibling.classList.add('selected');
      }
    };
    const enterEvent = () => {
      const { selected } = getSelectDom(true);
      if (selected)
        return (
          (selected.querySelector('.plan') ||
          selected.querySelector('.q-item__section>div')
        )as HTMLElement)?.click();
      //回车
      menuContent.value.show();
      setTimeout(() => {
        refPlan.value.focus();
      }, 300);
    };
    const getSelectDom = (byKeyDownOrKeyUp?) => {
      let queryPlan_list = document.querySelector('.queryPlan_list');
      if (byKeyDownOrKeyUp && document.querySelector('.plan_popover_operate')) {
        queryPlan_list = document.querySelector('.plan_popover_operate');
      }
      if (!queryPlan_list) return {};
      const itemList = queryPlan_list.querySelectorAll('.q-item');
      if (!itemList) return {};
      const selected = queryPlan_list.querySelector('.selected');
      return {
        queryPlan_list,
        selected,
        itemList,
      };
    };

    const keyOperate = e => {
      switch (e.keyCode) {
        case 13:
          enterEvent();
          break;
        case 40:
          //下箭头
          arrowDown(e);
          break;
        case 38:
          //上箭头
          arrowUp(e);
          break;
        case 37:
          //left
          arrowLeft(e);
          break;
        case 39:
          //right
          arrowRight(e);
          break;
        default:
          break;
      }
      if ([13, 40, 38, 37, 39].includes(e.keyCode)) {
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
      if (e.keyCode == 9) {
        menuContent.value.hide();
      }
    };
    onMounted(async () => {
      await nextTick();
      if(! refPlan.value) return
      
      refPlan.value.addEventListener('keyup', e => {
        delete e.qAnchorHandled;
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      refPlan.value.addEventListener(
        'focusin',
        e => {
          e.stopPropagation();
          e.preventDefault();
          return false;
        },
        true,
      );
      document.addEventListener('keydown', e => {
        if (document.querySelector('.plan_triangle_up')) {
          keyOperate(e);
        }
      });

      refPlan.value.addEventListener('keydown', e => {
        keyOperate(e);
      });
    });
}